require(['./config'], () => {
    require(['template', 'header', 'footer'], (template) => {
        class Cart {
            constructor() {
                this.init()
            }
            init() {
                let cart = localStorage.getItem('cart')
                if (cart) {
                    // 购物车不为空，就渲染购物车数据
                    $('.shopMessage').show()
                    $('.nullCart').hide()
                    this.cart = JSON.parse(cart)
                    let html = template('shopCart-template', { cart: this.cart })
                    $('.shopMessage').html(html)
                    //判断check的状态，已确认全选是否要勾选
                    let flag = $(".check:checked").length == $(".check").length;
                    $("#allcheck").prop("checked", flag);

                } else {
                    // 代表购物车为空，显示提示信息
                    $('.shopMessage').hide()
                    $('.nullCart').show()
                }
                //判断是否有登陆,登陆则隐藏登陆提示
                if($.cookie('lofo')) {
                    $('.noLogin').hide()
                    // window.location.reload()
                }
                

                this.Delete()
                this.numAdd()
                this.numReduce()
                this.calcTotalMoney()
                this.calcTotalNum()
                this.checksChange()
                this.allCheck()
            }

            //判断是否有登陆
            // hidelogin() {
            //     $('.noLogin').hide()
            // }

            calcTotalMoney() {
                // 根据localStorage的数据从0开始算总价
                let cart = localStorage.getItem('cart');
                if (cart) {
                    this.cart = JSON.parse(cart);
                    let allMoney = this.cart.reduce((money, shop) => {
                        if (shop.check) money += shop.num * shop.price;
                        return money;
                    }, 0)
                    $('#allMoney').html(allMoney)
                } else {
                    $('#allMoney').html(0)
                }
            }
            //计算购买了多少种商品
            calcTotalNum() {
                let cart = localStorage.getItem('cart')
                if (cart) {
                    this.cart = JSON.parse(cart)
                    let allNum = this.cart.reduce((num, shop) => {
                        if (shop.check) {
                            num += shop.num
                        }
                        return num
                    }, 0)
                    $('#cartNumber').html(allNum)
                } else {
                    $('#cartNumber').html(0)
                }
            }

            //单选功能
            checksChange() {
                const _this = this
                $('.check').on('change', function () {
                    // 把localStorage的数据check属性关联单选框的状态
                    const id = Number($(this).parents('.shop-top').attr('data-id'))
                    console.log(id)
                    // 根据id找到当前数据，修改check属性
                    _this.cart = _this.cart.map(shop => {
                        // prop 一般就是用与获取或者修改表单元素的影响数据的属性，比如下拉菜单的select,按钮的disabled,选框的checked
                        if (shop.id === id) shop.check = $(this).prop('checked')
                        return shop
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    _this.calcTotalMoney()
                })
            }

            //全选功能

            allCheck() {
                const _this = this
                $(document).on("click", ".check", function () {
                    let flag = $(".check:checked").length == $(".check").length;
                    $("#allcheck").prop("checked", flag);
                })
                $('#allcheck').on('change', function () {
                    $('.check').prop('checked', $(this).prop('checked'))
                    console.log($(this).prop('checked'))
                    _this.cart = _this.cart.map(shop => {
                        shop.check = $(this).prop('checked')
                        return shop
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    _this.calcTotalMoney()
                    _this.calcTotalNum()
                })
            }

            //删除功能
            Delete() {
                const _this = this
                $('.Delete').on("click", function () {
                    // $('.shopClearModel').show()
                    let id = Number($(this).attr('data-id'))
                    console.log(id)
                    let num
                    if (confirm('确定不要这个物品吗？')) {
                        _this.cart = _this.cart.map((shop, index) => {
                            if (shop.id === id) {
                                num = index
                            }
                            return shop
                        })
                        _this.cart.splice(num, 1)
                        localStorage.setItem('cart', JSON.stringify(_this.cart))
                        console.log(_this.cart)
                    }
                    //需要判断localStorage的value是否还要值
                    //没有值则清除locStorage中的cart
                    if (_this.cart.length === 0) {
                        localStorage.clear()
                    }
                    _this.calcTotalMoney()
                    _this.calcTotalNum()
                    _this.init()
                })
            }
            //增加商品
            numAdd() {
                const _this = this
                let cart = localStorage.getItem('cart')
                this.cart = JSON.parse(cart)
                let newNum = this.cart.reduce((num, shop) => {
                    num = shop.num
                    return num
                }, 0)
                console.log(newNum)
                $('.add').on("click", function () {
                    let id = Number($(this).parent().attr('data-id'))
                    _this.cart = _this.cart.map(shop => {
                        console.log(shop.id)
                        if (shop.id === id) {
                            console.log($('.num'))
                            shop.num++
                            $('.num').html(shop.num)
                        }
                        return shop
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    _this.calcTotalMoney()
                    _this.calcTotalNum()
                    _this.init()
                })
                //减少商品    
            }
            numReduce() {
                const _this = this
                let cart = localStorage.getItem('cart')
                this.cart = JSON.parse(cart)
                let newNum = this.cart.reduce((num, shop) => {
                    num = shop.num
                    return num
                }, 0)
                $('.cut').on("click", function () {
                    let id = Number($(this).parent().attr('data-id'))
                    _this.cart = _this.cart.map(shop => {
                        if (shop.id === id) {
                            shop.num--
                            if (shop.num >= 0) {
                                $('.num').html(shop.num)
                            }
                            else {
                                shop.num = 0
                                $('.num').html(shop.num)
                            }
                        }
                        return shop
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    _this.calcTotalMoney()
                    _this.calcTotalNum()
                    _this.init()
                })
            }

        }
        new Cart()
    })
})